<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>详情</title>
    <script src="/static/index/js/vue.js"></script>
    <script src="/static/index/js/moment.min.js"></script>
    <script src="/static/antd/dist/antd.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/antd.css">
    <script src="/static/antd/dist/jquery.js"></script>
    <script src="/static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/antd/dist/myLogos.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/style.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">
<!--    <link rel="stylesheet" type="text/css" href="/static/antd/dist/shop.css"/>-->
    <link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css"/>
<!--    <link rel="stylesheet" href="/static/item/scss/header.css"/>-->

    <style>

        #components-layout-demo-basic {
            text-align: center;
        }

        #components-layout-demo-basic .ant-layout-header,
        #components-layout-demo-basic .ant-layout-footer {
            background: #7dbcea;
            color: #fff;
        }

        #components-layout-demo-basic .ant-layout-footer {
            line-height: 1.5;
        }

        #components-layout-demo-basic .ant-layout-sider {
            background: #3ba0e9;
            color: #fff;
            line-height: 120px;
        }

        #components-layout-demo-basic .ant-layout-content {
            background: rgba(16, 142, 233, 1);
            color: #fff;
            min-height: 120px;
            line-height: 120px;
        }

        #components-layout-demo-basic > .ant-layout {
            margin-bottom: 48px;
        }

        #components-layout-demo-basic > .ant-layout:last-child {
            margin: 0;
        }

        .sku_attr_value {
            transition: all .3s;
            text-decoration: none;
        }

        .sku_attr_value:hover {
            box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.3);
        }
    </style>
</head>
<body>

<div id="app" style="min-width: 1332px;">
    <!-- 顶部 -->
    <div style="position: fixed; width: 100%; z-index: 999;top: 0;">
        <a-collapse>
            <a-collapse-panel style="font-size: 2rem; text-align: center" key="1"
                              th:header="${session.loginUser==null?'请登录':session.loginUser.nickname}">
                <a style="padding-left: 25px; color: cadetblue;" href="http://auth.shushan.com/login.html"
                   th:if="${session.loginUser==null}">登录</a>
                <div style="width: 50%; margin: 25px auto">
                    <a-button @click="cart" type="primary" style="width: 100%;">
                        购物车
                    </a-button>
                </div>
                <div style="width: 50%; margin: 0 auto">
                    <a-input-search
                            v-model="keywordInput"
                            placeholder="请输入关键字"
                            enter-button="搜索"
                            size="large"
                            @search="onSearch"></a-input-search>
                </div>
                <br/>
                {{keywordInput}}
                [[${param.keyword}]]
            </a-collapse-panel>
        </a-collapse>
    </div>
    <!-- 商品版本选择 -->
    <div style="margin-top: 50px;">
        <a-card hoverable style="margin: -8px;display: flex;justify-content: center;">
            <a-row :gutter="[16,16]">
                <a-card hoverable
                        style=" width: 40%; float: left;display: flex; justify-content: center;align-items: center;">
                    <a-col :span="12">
                        <a-card hoverable style="width: 450px; height: 500px;">
                            <div class="imgbox">
                                <div class="probox">
                                    <img style="width: 100%;" class="img1" alt="" th:src="${item.info.skuDefaultImg}">
                                    <div class="hoverbox"></div>
                                </div>
                                <div class="showbox" style="display: none;">
                                    <img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
                                </div>
                            </div>
                        </a-card>
                        <!-- 下部小图 -->
                        <div style="margin-top: 10px;">
                            <!--<ul style="list-style: none;">
                                <li th:each="img : ${item.images}"
                                    th:if="${!#strings.isEmpty(img.imgUrl)}">
                                    <img style="width: 58px; height: 58px;" th:src="${img.imgUrl}"/>
                                </li>
                            </ul>-->
                            <a-card hoverable style="width: 450px;">
                                <div class="box-lh">

                                    <div class="box-lh-one">
                                        <ul>
                                            <li th:each="img : ${item.images}" th:if="${!#strings.isEmpty(img.imgUrl)}"><img
                                                    th:src="${img.imgUrl}"/></li>
                                        </ul>
                                    </div>
                                    <div id="left">
                                        <
                                    </div>
                                    <div id="right">
                                        >
                                    </div>

                                </div>
                            </a-card>

                        </div>
                    </a-col>
                </a-card>
                <a-card hoverable
                        style=" width: 55%; float: right; display: flex;justify-content: center; align-items: center;">
                    <a-col :span="12">
                        <a-card hoverable style="width: 600px">
                            <a-popover title="更多" trigger="hover">
                                <template slot="content">
                                    <span style="color: red; font-size: 14px;"
                                          th:text="${item.info.skuSubtitle}"></span>
                                </template>
                                <a-card style="font-size: 2rem;" th:text="${item.info.skuTitle}">
                                </a-card>
                            </a-popover>

                            <a-card hoverable style="display: flex;justify-content: center; align-items: center;">
                                <a-tag color="#108ee9"
                                       style="font-size: 2rem; width: 60%; height: 40px; line-height: 40px">
                                    价格：
                                    <a-tag style="font-size: 1rem;position: relative; top: -3px; color: #d4f6f8; width: 52%;"
                                           color="#2db7f5"
                                           th:text="'￥'+${#numbers.formatDecimal(item.info.price, 1,2)}">
                                    </a-tag>
                                </a-tag>
                                <a-tag color="#108ee9" style="font-size: 2rem; height: 40px; line-height: 40px">
                                    <a-tag color="#2db7f5" style="position: relative; top: -3px; left: 3px;"
                                           th:text="${item.hasStock?'有货':'无货'}">
                                    </a-tag>
                                </a-tag>
                            </a-card>
                            <a-card hoverable th:each="attr : ${item.saleAttr}">
                                <dl>
                                    <dt>
                                        <a-tag style="font-size: 1.5rem;margin-bottom: 10px;">
                                            选择[[${attr.attrName}]]
                                        </a-tag>
                                    </dt>
                                    <dd style="display: grid;
                                        border: 1px solid cadetblue;
                                        text-align: center;
                                        line-height: 40px;
                                        font-size: 16px;" th:each="vals : ${attr.attrValues}">
                                        <a class="sku_attr_value"
                                           style="text-decoration: none;"
                                           th:attr="skus=${vals.skuIds},class=${(#lists.contains(#strings.listSplit(vals.skuIds, ','), item.info.skuId.toString()) ? 'sku_attr_value checked' : 'sku_attr_value')}">
                                            [[${vals.attrValue}]]
                                            <!--                                    <img src="/static/item/img/59ddfcb1Nc3edb8f1.jpg"/> -->
                                        </a>
                                    </dd>
                                </dl>
                            </a-card>
                            <a-card hoverable style="display: flex; justify-content: center; align-items: center;">
                                <a-input-number id="numInput" size="large" :min="1" v-model="productNum" :max="100000"
                                                @change="onChange"></a-input-number>
                                <a-button size="large" type="danger" @click="addToCart" id="addToCart"
                                          th:attr="skuId=${item.info.skuId}">加入购物车
                                    <a-icon type="shopping-cart"></a-icon>
                                </a-button>
                            </a-card>
                            <!--<div class="box-two">
                                <div class="box-btns clear">
                                    <div class="box-btns-two">
                                        <a href="#" id="addToCart" th:attr="skuId=${item.info.skuId}">
                                            加入购物车
                                        </a>
                                    </div>
                                </div>
                            </div>-->
                        </a-card>
                    </a-col>
                </a-card>
            </a-row>
        </a-card>
    </div>
    <!-- 商品长图介绍及相关规格参数 -->
    <div style="display: flex;margin-top: 20px; margin-bottom: 20px; justify-content: center;align-items: center;">
        <a-tabs default-active-key="1" style=" width: 75%;text-align: center;">
            <a-tab-pane key="1">
                   <span slot="tab">
                    <a-icon type="appstore"></a-icon>
                    商品介绍
                  </span>

                <a-card hoverable>
                    <img class="xiaoguo" th:src="${descp}"
                         th:each="descp : ${#strings.listSplit(item.desp.decript, ',')}"/>
                </a-card>
            </a-tab-pane>
            <a-tab-pane key="2">
                  <span slot="tab">
                    <a-icon type="profile"></a-icon>
                    规格参数
                  </span>
                <li class="baozhuang actives" id="li2">
                    <div class="guiGeboxss">
                        <div class="guiGess" style="display: inline-flex; letter-spacing: 7px;"
                             th:each="group : ${item.groupAttrs}">
                            <a-card hoverable>
                                <h3 th:text="${group.groupName}">主体</h3>
                                <dl>
                                    <a-card hoverable th:each="attr : ${group.attrs}">
                                        <dt th:text="${attr.attrName}">品牌</dt>
                                        <dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
                                    </a-card>
                                </dl>
                            </a-card>
                        </div>
                    </div>
                    <!-- <div class="guiGebox guiGebox1">
                         <div class="package-list">
                             <h3>包装清单</h3>
                             <p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X
                                 1、半入耳式线控耳机
                                 X 1、快速指南X 1、三包凭证 X
                                 1、取卡针 X 1、保护壳 X 1</p>
                         </div>
                     </div>-->
                </li>
            </a-tab-pane>
        </a-tabs>
    </div>
    <!-- 底部 -->
    <div class="mkl_footer"
         style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
        <div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
            <div class="container">
                <div class="mkls_footer_grid">
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>地址:</h4>
                        <p>贵州省贵阳市清镇市,
                            <br> 云岭东路</p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>联系</h4>
                        <p>
                            <span>电话 : </span>182 xxxx 8687</p>
                        <p>
                            <span>邮箱 : </span>
                            <a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
                        </p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>营业时间:</h4>
                        <p>全天候</p>
                        <p>每周五维护
                            <span>(数据服务)</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="footer-copy-right">
            <div class="container">
                <div class="allah-copy">
                    <p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank"></a></p>
                </div>
                <div class="footercopy-social">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="fa fa-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-rss"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-vk"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- 底部锚点 -->
    <div>
        <a-back-top></a-back-top>
    </div>
    <!-- 返回搜索按钮 -->
    <div style="position:fixed; top: 5px; right: 5px;">
        <a-affix :offset-top="top">
            <a-button @click="back" type="primary">
                返回搜索
            </a-button>
        </a-affix>

    </div>
<!--    [[${item.hasStock}]]-->
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                keywordInput: "",
                productNum: 1,
                top: 50,
                bottom: 10,
            }
        },
        methods: {
            onSearch() {
                // window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
                location.href = "http://search.shushan.com/list.html?keyword=" + this.keywordInput
                // console.log('搜索值',value);
            },
            cart() {
                window.location.href = "http://cart.shushan.com/cart.html";
            },
            onChange(value) {

            },
            addToCart() {
                // console.log("上平书皮昂",this.productNum)
                let skuId = $("#addToCart").attr("skuId")
                // console.log(skuId,"sssss")
                location.href = "http://cart.shushan.com/addToCart?skuId=" + skuId + "&num=" + this.productNum;
            },
            back() {
                location.href = "http://search.shushan.com/list.html";
            }
        },

    })


    $(".sku_attr_value").click(function () {
        // console.log("123")
        // 电机的元素先添加上自定义属性，为了识别
        const skus = [];
        $(this).addClass("clicked")
        let curr = $(this).attr("skus").split(",")
        // 当前被点击的sku组合
        skus.push(curr)
        // 去掉同一行多有checked
        $(this).parent().parent().find(".sku_attr_value").removeClass("checked")

        $("a[class='sku_attr_value checked']").each(function () {
            skus.push($(this).attr("skus").split(","))
        })
        console.log(skus)

        // 2 取出他们的交集
        // console.log($(skus[0]).filter(skus[1])[0])
        let filterEle = skus[0];
        for (let i = 1; i < skus.length; i++) {
            filterEle = $(skus[0]).filter(skus[i])
        }
        console.log(filterEle)
        location.href = "http://item.shushan.com/" + filterEle[0] + ".html"
        //4 跳转

    })
    // 文档加载完成后执行
    $(function () {
        $(".sku_attr_value").parent().css({"border": "solid 2px #CCCCCC"})
        $("a[class='sku_attr_value checked']").parent().css({"border": "solid 2px red"})
        // $("a[class='sku_attr_value']").css({"border": "solid 1px #CCCCCC"})
        // $(".sku_attr_value.checked").css({"border": "solid 1px red"})
    })

</script>

</body>
</html>